<template>
  <d-scroll-view  @refresherrefresh="getDetail" :refresher-triggered="triggered">
    <proj-detail-layout :process-instance-id="processInstanceId" :project-number="projectNumber">
      <d-forms label-width="200rpx">
        <d-forms-item label="收款单位" :input="form.payee"></d-forms-item>
        <d-forms-item label="应付款类型" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.PAYMENT_TYPE" :input="form.paymentType"></d-forms-item>
        <d-forms-item label="金额" :type="DFormInputType.AMOUNT" :input="form.amount"></d-forms-item>
        <d-forms-item label="金额(大写)" :input="numToChinese(form.amount)"></d-forms-item>
        <view v-if="form.paymentType === PaymentType.PURCHASE_CONTRACT">
          <d-forms-item label="采购施工合同" :input="pccName"></d-forms-item>
          <d-forms-item label="付款批次" :input="payName"></d-forms-item>
          <view>
            <view class="form-title-1">合同附件(PDF)</view>
            <d-card>
              <pm-file-upload readonly :files="form.contractAttach"></pm-file-upload>
            </d-card>
          </view>
        </view>
        <d-forms-item label="是否已提供发票" :input="form.haveReceipt ? '是' : '否'"></d-forms-item>
        <view v-if="form.haveReceipt">
          <view class="form-title-1">发票上传</view>
          <d-card>
            <pm-file-upload readonly :files="form.receipt"></pm-file-upload>
          </d-card>
        </view>
        <view>
          <view class="form-title-1">付款信息</view>
          <d-card>
            <d-forms-item label-width="160rpx" disabled label="付款方式" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.PAYMENT_MODE" :input="form.paymentMode"></d-forms-item>
            <d-forms-item label-width="160rpx" disabled label="开户行" :input="form.accountsBank"></d-forms-item>
            <d-forms-item label-width="160rpx" disabled label="户名" :input="form.accountName"></d-forms-item>
            <d-forms-item label-width="160rpx" disabled label="账号" :input="form.account"></d-forms-item>
          </d-card>
        </view>
        <view v-if="form.paymentType !== PaymentType.PURCHASE_CONTRACT">
          <view class="form-title-1">付款依据</view>
          <d-card>
            <pm-file-upload readonly :files="form.file"></pm-file-upload>
          </d-card>
        </view>
        <view>
          <view class="form-title-1">付款内容说明</view>
          <d-card>
            <d-forms-item disabled :input="form.description"></d-forms-item>
          </d-card>
        </view>
      </d-forms>
    </proj-detail-layout>
  </d-scroll-view>
</template>

<script setup lang="ts">
import ProjDetailLayout from "@/components/ProjDetailLayout/index.vue";
import {useAccountsPayApi} from "@/api/pm/project/accountsPay";
import {DFormInputType, PaymentType} from "@/utils/enum";
import {PM_DICT_TYPE} from "@/utils/pmDict";
import {numToChinese} from "@/utils";

defineOptions({ name: 'AccountsPayApply' })

const initForm = {
  id: null,
  projectNumber: null,
  purchaseConstructionContractId: null,
  plannedPaymentId: null,
  paymentType: null,
  payee: null,
  amount: null,
  paymentMode: null,
  accountsBank: null,
  accountName: null,
  account: null,
  description: null,
  haveReceipt: true,
  receipt: null,
  contractAttach: null,
  file: null,
  applyTime: null,
  processInstanceId: null,
  result: null,
  storaged: null,
}
const form = ref<AccountsPayForm>(initForm)
const triggered = ref<boolean>(false);
function getDetail() {
  if (processInstanceId.value) {
    triggered.value = true;
    useAccountsPayApi().getPAByProcessInstanceId(processInstanceId.value).then(res => {
      if (res.code === 0) {
        form.value = res.data || initForm
        getPaymentCycle();
      }
    }).finally(() => {
      triggered.value = false;
    })
  }
  getPccOptions();
}

const pccName = computed(() => {
  const contract = pccOptions.value.find(item => item.id === form.value.purchaseConstructionContractId);
  return contract ? contract.contractName : form.value.purchaseConstructionContractId;
})

const payName = computed(() => {
  const contract = paymentCycleOptions.value.find(item => item.id === form.value.plannedPaymentId);
  return contract ? contract.paymentBatch : form.value.plannedPaymentId;
})

const paymentCycleOptions = ref<PlannedPaymentForm[]>([]);
function getPaymentCycle() {
  if (form.value.purchaseConstructionContractId) {
    useAccountsPayApi().optionsPaymentPlanned(form.value.purchaseConstructionContractId).then(res => {
      if (res.code === 0 && res.data) {
        paymentCycleOptions.value = res.data
      }
    })
  }
}

const pccOptions = ref<AccountsPayContractForm[]>([]);
function getPccOptions() {
  if (projectNumber.value) {
    useAccountsPayApi().getOptionsPurchaseConstructionContract(projectNumber.value).then(res => {
      if (res.code === 0 && res.data) {
        pccOptions.value = res.data
      }
    })
  }
}

const projectNumber = ref<string>(null);
const processInstanceId = ref<string>(null);
onLoad((query) => {
  projectNumber.value = query['project_number']
  processInstanceId.value = query['process_instance_id']
  getDetail();
})
</script>

<style scoped lang="scss">

</style>
